<template>
  <div>
    统计数据展示
    <el-row>
      <el-col :span="12">
        <div id="incomesDiv" style="height: 600px"></div>
      </el-col>
      <el-col :span="12">
        <div id="eduDiv" style="height: 600px"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import statApi from "@/api/stat";
export default {
  data() {
    return {
      // { k:v,k:v }
      incomes: null,
      educations: null,
    };
  },
  //不能在created中执行：页面需要的echarts还未加载成功
  mounted() {
    //this.initCharts();
    this.initData();
  },
  methods: {
    initData() {
      statApi.list().then((r) => {
        this.educations = r.data.educations;
        this.incomes = r.data.incomes;
        //数据加载成功后渲染页面中的饼图
        this.initCharts("incomesDiv", this.incomes);
        this.initCharts("eduDiv", this.educations);
      });
    },
    //修改为通用的echart渲染的函数
    initCharts(eleId, data) {
      var chartDom = document.getElementById(eleId);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data,
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
